<template>
  <div class="quiz-page">
    <!-- 背景图片和标题 -->
    <div class="background-section">
    
      <!-- <img src="./test.png" alt="Quiz Background" class="background-image"> -->
      <div class="title">请选择您认为正确的答案
        <br>Please choose the answer you think is correct
      </div>
    
    </div>

    <!-- 答题部分 -->
    <div class="question-section">
      <div class="sidebar">
        <!-- 答题目录 -->
        <ul>
          <li v-for="(question, index) in questions" :key="index" @click="selectQuestion(index)">
            {{ question.title }}
          </li>
        </ul>
      </div>
      <div class="question-content">
        <!-- 当前题目内容 -->
        <div v-if="selectedQuestionIndex !== null">
          <h2>{{ selectedQuestion.question }}</h2>
          <ul>
            <li v-for="(option, optionIndex) in selectedQuestion.options" :key="optionIndex" @click="selectOption(optionIndex)">
              {{ option }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          id: 1,
          title: '问题1',
          question: '1.以下不属于藏族非遗的是：',
          options: ['A.邦典', 'B.弦子舞', 'C.羌姆', 'D.阿诗玛']
        },
        { id: 2, title: '问题2', question: '这是第二个问题', options: ['选项A', '选项B', '选项C', '选项D'] },
        { id: 3, title: '问题3', question: '这是第三个问题', options: ['选项A', '选项B', '选项C', '选项D'] },
        { id: 4, title: '问题4', question: '这是第四个问题', options: ['选项A', '选项B', '选项C', '选项D'] },
        // ... 其他问题 ...
      ],
      selectedQuestionIndex: 0, // 用于存储当前选中的题目的索引
      selectedQuestion: null // 用于存储当前选中的题目的详细信息
    };
  },
  computed: {
    // 使用计算属性来获取当前选中的题目
    selectedQuestion() {
      if (this.selectedQuestionIndex !== null && this.questions[this.selectedQuestionIndex]) {
        return this.questions[this.selectedQuestionIndex];
      }
      return null;
    }
  },
  methods: {
    selectQuestion(index) {
      this.selectedQuestionIndex = index; // 更新选中的题目索引
    },
    selectOption(optionIndex) {
      // 这里可以添加处理选中选项的逻辑
      alert(`您选择了选项：${this.selectedQuestion.options[optionIndex]}`);
    }
  }
};
</script>

<style scoped>
.quiz-page {
  background-image: url("../../assets/test/test.png");
  background-size: cover;
  background-position: center; /* 中心对齐背景图 */
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.background-section {
  position: relative;
  margin-top: 20px;
  height: 35%;
  width: 100%;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
  text-align: center;
  width: 100%;
  white-space: pre-wrap;
}

.question-section {
  display: flex;
  margin-left: 25vw;
  height: 50%;
}

.sidebar {
  margin-left: 70px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 10%;
  background-color:#E8E4DC;
  overflow-y: auto;
  border-radius: 29px;
  color: #535250;
  text-align: center
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.question-content {
  margin-top: 30px;
  margin-left: 1vw;
  margin-bottom: 30px;
  border-radius: 29px;
  width: 40%;
  overflow-y: auto;
  background-color: #E8E4DC;
  text-align: start; /* 使问题内容居中 */
  list-style-type: none;
  padding: 60px;
  color: #535250;
  line-height: 35px; /* 也可以设置为具体的像素值 */
}
</style>